import React, { useContext, useState, useEffect } from 'react';
import VoteMain from './VoteMain';
import VoteFooter from './VoteFooter';
import './Vote.less';
import ThemeContext from '../../../ThemeContext';
export default function Vote() {
  const { store } = useContext(ThemeContext);
  const { supNum, oppNum } = store.getState();
  const [num, setNum] = useState(0);
  const update = () => {
    setNum(num + 1);
  };
  useEffect(() => {
    const unsubscribe = store.subscribe(update);
    return () => {
      unsubscribe();
    };
  }, [num]);
  return (
    <>
      <div className='vote-box'>
        <div className='header'>
          <h2 className='title'> React是很棒的前端框架</h2>
          <span className='num'>num: {supNum + oppNum}</span>
        </div>
        <VoteMain />
        <VoteFooter />
      </div>
    </>
  );
}
